<template>
	<div class="homePage" :style="{'min-height':height+'px'}" v-if='list.user_data'>
		<div style="background: #fff;">
			<div class="wd_title">
				{{list.user_data.username}}
			</div>
			<div class="wd_title2">
				<div class="homePage_div flex">
					<div class="homePage_img" @click="imageClick2">
						<img :src="list.user_data.head_img_s" @error='(e)=>{e.target.src="../../../../static/img/images/people.jpg"}' />
					</div>
					<div class="homePage_text flex1">
						<div class="homePage_text1 flex align_center">
							<span class="homePage_texts1">{{list.user_data.username}}</span>
						</div>
						<div class="homePage_text2 flex align_center">
							资料完善度{{list.user_data.date_degree}}%
						</div>
						<div class="homePage_text3">
							<span :class="list.user_data.is_hui==0?'hui':''">VIP</span>
							<span :class="list.user_data.is_phone==0?'hui':''"><i class="el-icon-mobile-phone"></i>{{list.user_data.is_phone==0?'未认证':'已认证'}}</span>
							<span :class="list.user_data.is_member_code==0?'hui':''"><img src="../../../../static/img/images/wd1.png" />{{list.user_data.is_member_code==0?'未认证':'已认证'}}</span>
						</div>
					</div>
				</div>
			</div>
			<div class="wd_title3 clear2" style="border-bottom: 5px solid #e7e9ee;padding: 1% 2.5%;">
				<div class="wd_t3d" @click="jump('wdgz')">
					<p class="wd_t3p1">{{list.my_attention}}</p>
					<p class="wd_t3p2">我的关注</p>
				</div>
				<div class="wd_t3d" @click="jump('wdfs')">
					<p class="wd_t3p1">{{list.my_fans}}</p>
					<p class="wd_t3p2">我的粉丝</p>
				</div>
				<div class="wd_t3d" @click="jump('wddt')">
					<p class="wd_t3p1">{{list.my_dynamic}}</p>
					<p class="wd_t3p2">我的动态</p>
				</div>
			</div>
			<div class="wd_title3 flex align_center" @click="jump2">
				<img src="../../../../static/img/images/wd2.jpg" />
				<p class="flex1">我的主页</p>
				<i class="el-icon-arrow-right" style="right: ;"></i>
			</div>
			<div class="wd_title3 flex align_center" @click="jump('wdzl')">
				<img src="../../../../static/img/images/wd3.jpg" />
				<p class="flex1">我的资料</p>
				<i class="el-icon-arrow-right" style="right: ;"></i>
			</div>
			<div class="wd_title3 flex align_center" @click="jump('wdxc')">
				<img src="../../../../static/img/images/wd4.jpg" />
				<p class="flex1">我的相册</p>
				<i class="el-icon-arrow-right" style="right: ;"></i>
			</div>
			<div class="wd_title3 flex align_center" style="border-bottom: 5px solid #e7e9ee;" @click="jump('wdqb')">
				<img src="../../../../static/img/images/wd5.jpg" />
				<p class="flex1">我的钱包</p>
				<i class="el-icon-arrow-right" style="right: ;"></i>
			</div>
			<div class="wd_title3 flex align_center" @click="jump('rzzx')">
				<img src="../../../../static/img/images/wd6.jpg" />
				<p class="flex1">认证中心</p>
				<i class="el-icon-arrow-right" style="right: ;"></i>
			</div>
			<div class="wd_title3 flex align_center" @click="jump('hydg')">
				<img src="../../../../static/img/images/wd7.jpg" />
				<p class="flex1">会员中心</p>
				<i class="el-icon-arrow-right" style="right: ;"></i>
			</div>
			<div @click="jump('grsz')" class="wd_title3 flex align_center" style="border-bottom: 10px solid #e7e9ee;">
				<img src="../../../../static/img/images/wd8.jpg" />
				<p class="flex1">个人设置</p>
				<i class="el-icon-arrow-right" style="right: ;"></i>
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		components: {

		},
		watch: {

		},
		props: [

		],
		data: function() {
			return {
				height: '',
				list:[],
			}
		},
		mounted() {
			this.height = document.body.offsetHeight;
			this.peopleList();
		},
		methods: {
			imageClick2(imgObj,key) {
			    let imgArray = [];
			    
			 	imgArray.push(this.list.user_data.head_img);
			    
			    WeixinJSBridge.invoke('imagePreview', {   
			        'current' : imgArray[0],  
			        'urls' : imgArray  
			    });  
			},
			jump2(){
				this.$router.push({
					path: '/wode/wdzy',
					query: {
						'id':window.uid
					}
				})
			},
			jump(tiao){
				this.$router.push({
					path: '/wode/'+tiao,
				})
			},
			peopleList() {
				let  loading=this.$loading({
		          lock: true,
		          text: 'Loading',
		          spinner: 'el-icon-loading',
		          background: 'rgba(255, 255, 255, 1)'
		        });
				this.$http.post(this.defines.getPersonal, {
						uid: window.uid
					}, {
						emulateJSON: true
					})
					.then(
						(data) => {
							this.list=data.data.data;
							loading.close();
						},
						(error) => {
							console.log(error);
						}
					);

			},
		}
	}
</script>

<style scoped>
	.wd_title {
		text-align: center;
	    color: #1c1c1c;
	    font-size: 1.6rem;
	    line-height: 1.6rem;
	    padding: 3% 0;
	    border-bottom: 1px solid #e7e9ee;
	}
	
	.wd_title2 {
		text-align: center;
		color: #b042ff;
		font-size: 1.5rem;
		padding: 0% 2.5%;
		width: 95%;
		border-bottom: 1px solid #f3f3f3;
	}
	
	.homePage {
		width: 100%;
		background: #e7e9ee;
	}
	
	.homePage_div {
		background: #fff;
		border-radius: 5px;
		padding: 3% 0%;
		width: 100%;
	}
	
	.homePage_img {
		width: 6.7rem;
		height: 6.7rem;
		margin-right: 4%;
		border-radius: 0.5rem;
		overflow: hidden
	}
	
	.homePage_img img {
		height: 6.7rem;
		display: block;
		width: 6.7rem;
		object-fit: cover;
	}
	
	.homePage_text1 {
		height: 2.5rem;
	}
	
	.homePage_texts1 {
		font-size: 1.5rem;
		color: #ff4242;
		overflow: overlay;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.homePage_text2 {
		font-size: 1.4rem;
		color: #8a8a8a;
		height: 1.5rem;
		line-height: 1.5rem;
		margin-bottom: 0.6rem;
	}
	
	.homePage_text3 {
		text-align: left;
		font-size: 1.4rem;
	}
	
	.homePage_text3 span {
		background: #4297ff;
		color: #fff;
		margin-right: 1%;
		padding: 1px 2px;
		border-radius: 3px;
		white-space: nowrap;
	}
	
	.homePage_text3 span img {
		height: 1.2rem;
	}
	
	.wd_title3 {
		width: 100%;
		border-bottom: 4px solid #e7e9ee;
	}
	
	.wd_t3d {
		margin: 3% 0;
		width: 33.3%;
		float: left;
		text-align: center;
		font-size: 1.4rem;
		color: #181818;
		border-right: 1px solid #f3f3f3;
		box-sizing: border-box;
	}
	
	.wd_t3d:nth-last-child(1) {
		border: 0;
	}
	
	.wd_t3p2 {
		color: #505050;
	}
	
	.wd_title3 {
		padding: 3% 2.5%;
		width: 95%;
		border-bottom: 1px solid #f3f3f3;
		font-size: 1.5rem;
		color: #4a4a4a;
	}
	
	.wd_title3 img {
		width: 5%;
		margin-right: 3%;
	}
	.wd_title3 i{
		color: #a7a7a7;
	}
	.hui{
		background: #d1d1d1 !important;
	}
</style>
<style>

</style>